<script setup>

import router from "@/router";
import {reactive, ref} from "vue";
import {get, post} from "@/net";
import {ElMessage, ElMessageBox} from "element-plus";

const tableData = reactive([])

const getGameList = () => {
    get('/api/game/all',
            (data) => {
                tableData.value = data
                for (let i = 0; i < tableData.value.length; i++) {
                    isEnd(i, tableData.value[i].gid)
                }
                initData()
                console.log(tableData.value)
            }, () => {
                ElMessage.warning('查询比赛信息列表失败')
            }
    )
}

const pageSize = 8 // 每页显示的数据数量
const currentPage = ref(1) // 当前页码
const total = ref(0) // 总数据条数
const pagedData = ref([]) // 当前页的数据

// 初始化数据
const initData = () => {
    total.value = tableData.value.length
    updatePageData()
}

// 更新当前页的数据
const updatePageData = () => {
    const start = (currentPage.value - 1) * pageSize
    const end = start + pageSize
    pagedData.value = tableData.value.slice(start, end)
}

// 处理页码变化的函数
const handlePageChange = (newPage) => {
    currentPage.value = newPage
    updatePageData()
};

// 调用函数来获取数据
const fetchData = () => {
    getGameList()
}

// 调用 fetchData 来获取数据
fetchData()

const endGame = (scope) => {
    post('/api/statistics/add',{
                gid: scope.row.gid
            }, (message) => {
                ElMessage.success(message)
                scope.row.isEnd = true
            }, () => {
                ElMessage.warning('结束比赛失败')
            }
    )
}

const isEnd = (i, gid) => {
    post('/api/statistics/gid', {
            gid: gid
        }, (data) => {
            tableData.value[i].isEnd = data.length > 0;
        }
    )
}

const deleteGame = (scope) => {
    post('api/game/delete', {
            gid: scope.row.gid
        }, (message) => {
            ElMessage.success(message)
            getGameList()
        }, (message) => {
            ElMessage.warning(message)
        }
    )
}

const open = (scope) => {
    ElMessageBox.confirm(
            '比赛将会结束并进行数据统计，且操作不可撤销，请确认是否结束比赛',
            'Warning',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
    ).then(() => {
        endGame(scope)
    })
};

</script>

<template>
    <div>
        <div>
            <el-button @click="router.push('/index')" type="warning">{{ '返回' }}</el-button>
        </div>
        <div class="game-list">
            <el-table :data="pagedData" style="width: 1180px">
                <el-table-column label="Id" prop="gid"/>
                <el-table-column label="比赛名称" prop="name"/>
                <el-table-column label="开始时间" prop="start_time"/>
                <el-table-column label="结束时间" prop="end_time"/>
                <el-table-column align="right">
                    <template #header>
                        <el-row :gutter="10" style="width: 100%;">
                            <el-col :span="18">
                                <el-input size="small" placeholder="Type to search"/>
                            </el-col>
                            <el-col :span="3">
                                <el-button
                                        size="small"
                                        type="primary"
                                        @click="router.push('/index/add-game')"
                                >新增
                                </el-button>
                            </el-col>
                        </el-row>
                    </template>
                    <template #default="scope">
                        <el-button size="small"
                                   @click="router.push({path: '/index/update-game', query: {gid: scope.row.gid}})"
                                   v-if="!scope.row.isEnd">查看详情
                        </el-button>
                        <el-button size="small"
                                   @click="open(scope)"
                                   v-if="!scope.row.isEnd"
                                   type="success">结束比赛
                        </el-button>
                        <el-button size="small"
                                   @click="router.push({path: '/index/statistic-game', query: {gid: scope.row.gid}})"
                                   v-if="scope.row.isEnd"
                                   type="success">查看统计
                        </el-button>
                        <el-button size="small"
                                   @click="router.push({path: '/index/judge-score', query: {gid: scope.row.gid}})"
                                   v-if="!scope.row.isEnd">裁判评分
                        </el-button>
                        <el-button size="small"
                                   @click="router.push({path: '/index/vote', query: {gid: scope.row.gid}})"
                                   v-if="!scope.row.isEnd">投票
                        </el-button>
                        <el-popconfirm
                                title="确定要删除该比赛吗?"
                                confirm-button-text="确认"
                                cancel-button-text="取消"
                                @confirm="deleteGame(scope)"
                        >
                            <template #reference>
                                <el-button
                                        size="small"
                                        type="danger"
                                >删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    style="margin: 20px 400px"
                    layout="total, prev, pager, next, jumper"
                    background
                    :page-size="pageSize"
                    :current-page="currentPage"
                    :total="total"
                    @current-change="handlePageChange"
            />
        </div>
    </div>
</template>

<style scoped>
.game-list {
    margin-left: 60px;
}
</style>